<template>
    <el-card>
        <template #header>
            <div class='card-header'>
                <span>申请委托</span>
            </div>
        </template>

        <el-steps
            :active='active'
            finish-status='success'
            process-status='process'
            align-center
            style='margin-top: 20px;margin-bottom: 20px;'
        >
            <el-step title='基本信息' />
            <el-step title='委托单信息' />
            <el-step title='成功' />
        </el-steps>
        <el-row>
            <el-col :span='20' :offset='2'>
                <el-form
                    v-if='active == 0'
                    ref='formRef'
                    :model='form'
                    :rules='rules'
                    label-width='120px'
                >

                    <el-form-item label='选择工程' prop='projectId'>
                        <el-select v-model='form.projectId' class='m-2' placeholder='选择工程'>
                            <el-option
                                v-for='item in projectList'
                                :key='item.id'
                                :label='item.project'
                                :value='item.id'
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label='检测站' prop='checkId'>
                        <el-select v-model='form.checkId' class='m-2' placeholder='选择检测站' @change='getCheckTypeList'>
                            <el-option
                                v-for='item in checkList'
                                :key='item.id'
                                :label='item.name'
                                :value='item.id'
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label='检测类型' prop='checkTypeId'>
                        <el-select
                            v-model='form.checkTypeId'
                            class='m-2'
                            placeholder='检测类型'
                            @change='selectCheckType'
                        >
                            <el-option
                                v-for='item in checkTypeList'
                                :key='item.check_type_id'
                                :label='item.report_name'
                                :value='item.check_type_id'
                            />
                        </el-select>
                    </el-form-item>

                    <!--                    <el-form-item label='来样编号' prop='order'>-->
                    <!--                        <el-input v-model='form.order' placeholder='委托方自己记录用'/>-->
                    <!--                    </el-form-item>-->

                    <!--                    <el-form-item label='品种规格' prop='specifications'>-->
                    <!--                        <el-input v-model='form.specifications' placeholder='品种规格'/>-->
                    <!--                    </el-form-item>-->

                    <!--                    <el-form-item label='使用部位' prop='position'>-->
                    <!--                        <el-input v-model='form.position' placeholder='使用部位'/>-->
                    <!--                    </el-form-item>-->

                    <!--                    <el-form-item label='送检部位' prop='sendPosition'>-->
                    <!--                        <el-input v-model='form.sendPosition' placeholder='送检部位'/>-->
                    <!--                    </el-form-item>-->

                    <!--                    <el-form-item label='备注' prop='specifications'>-->
                    <!--                        <el-input v-model='form.other' placeholder='备注' type='textarea'/>-->
                    <!--                    </el-form-item>-->
                </el-form>

                <div v-show='active == 1' id='wtd' style='width: 100%;height:1080px;'>
                    <!--        委托单-->
                </div>


                <el-button v-if='active != 2' type='primary' @click='next'>{{ active == 0 ? '下一步' : '提交' }}</el-button>

                <el-result
                    v-if='active==2'
                    icon='success'
                    title='添加成功'
                    sub-title='委托单位添加成功'
                >
                    <template #extra>
                        <el-button type='primary' @click='active = 0'>返回</el-button>
                    </template>
                </el-result>

            </el-col>
        </el-row>
    </el-card>

</template>

<script lang='ts'>
import { defineComponent, nextTick, reactive, Ref, ref } from 'vue'
import type { ElForm } from 'element-plus'
// 网络请求
import { addSamples as AddSamples } from '/@/api/Samples'
import { getTableList, getCheckType } from '/@/api/Check'
import { getTableList as Api_ProjectList } from '/@/api/Project'

import { validate } from '/@/utils/formExtend'
import { ElMessage, ElNotification } from 'element-plus'
import router from '/@/router'
import { ISamplesAdd } from '/@/type/views/Samples/SamplesAdd'
import { ICheckTableList } from '/@/type/views/Check/CheckList'
import { ICheckTypeTableList } from '/@/type/views/CheckType/CheckTypeList'
import { getCheckTypeById } from '/@/api/CheckType'
import { IProjectTableList } from '/@/type/views/Project/ProjectList'

type FormInstance = InstanceType<typeof ElForm>

// 添加工程
const addSamples = async(form: ISamplesAdd) => {
    const res = await AddSamples(form)
    ElNotification({
        title: '成功',
        message: res.data.message,
        type: 'success'
    })
    await router.push('/Samples/SamplesList')
    return true
}

/**
 * 选择检测站
 * @param checkList
 */

const getCheckList = async(checkList: Ref): void => {
    let d = await getTableList({ page: 1, pageSize: 9999 })
    checkList.value = d.data.data.records
}

const getProjectList = async(ProjectList: Ref): void => {
    let d = await Api_ProjectList({ page: 1, pageSize: 9999 })
    ProjectList.value = d.data.data.records
}

// 获取该检测类型详情


const add = (form: ISamplesAdd) => {
    const formRef = ref<FormInstance>()
    const active = ref(0)
    // 等下改成0
    const rules = reactive({
        checkId: [{ required: true, message: '请选择检测站', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择检测项目', trigger: 'change' }],
        checkTypeId: [{ required: true, message: '请选择对应检测报告', trigger: 'change' }]
        // sendType: [{ required: true, message: '送检方式不可为空', trigger: 'blur' }],
        // order: [{ required: true, message: '来样编号不可为空', trigger: 'blur' }],
        // specifications: [{ required: true, message: '品种规格不可为空', trigger: 'blur' }],
        // position: [{ required: true, message: '使用部位不可为空', trigger: 'blur' }],
        // sendPosition: [{ required: true, message: '送检部位不可为空', trigger: 'blur' }]
    })

    // 获取项目列表
    const projectList = ref([] as IProjectTableList)
    getProjectList(projectList)

    // 获取检测站列表
    const checkList = ref([] as ICheckTableList)
    getCheckList(checkList)

    // 检测类型列表
    const checkTypeList = ref([] as ICheckTypeTableList)

    const checkTypeDetails = ref()
    // 获取检测类型详情

    const getCheckTypeList = async(id) => {
        // 先清空检测类型和详情
        form.checkTypeId = ''
        // 根据id查询检测类型
        let d = await getCheckType(id)
        checkTypeList.value = d.data.data
    }


    const selectCheckType = async(id: number) => {
        // 获取检测类型详情
        // 这里改的乱七八糟的了. 天天改.
        let d = await getCheckTypeById(id)
        checkTypeDetails.value = d.data.data
        nextTick(() => {
            XDts.form('wtd',`http://42.194.158.98:8123/api/file/${checkTypeDetails.value.form}`,
                form => { // 表单初始化成功回调函数
                    // 为表单赋值
                    // form.data = {
                    //     "委托单位": 'test',
                    //     "检测数据": [
                    //     ]
                    // }
                },
                msg => alert(msg)
            )
        })
    }

    const next = async() => {
        switch (active.value) {
        case 0:
            if (!await validate(formRef)) return
            active.value = 1
            break
        case 1:
            // 提交表单
            const formData = XDts.form('wtd').data

            // 处理预提交的数据
            let data = {
                checkTypeId: form.checkTypeId, // 检测类型id
                projectId: form.projectId, // 项目id
                checkId: form.checkId, // 检测站id
                // form: form.form, // 检测类型表单
                formData: JSON.stringify(formData), // 检测类型表单
            }

            addSamples(data).then(() => {
                active.value = 2
            })

            // vFormRef.value.getFormData()
            //     .then(formData => {
            //         // alert(JSON.stringify(formData))
            //         form.formData = JSON.stringify(formData)
            //         addSamples(form)
            //         active.value = 2
            //     })
            //     .catch(error => {
            //         ElMessage.error(error)
            //     })
            break
        default:
            break
        }
    }

    return {
        rules,
        formRef,
        next,
        active,
        checkList,
        projectList,
        getCheckTypeList,
        checkTypeList,
        selectCheckType
    }
}

export default defineComponent({
    name: 'SamplesAdd',
    components: {},
    setup() {
        XDts.server = 'https://xdts.xdocin.com/'
        const form: ISamplesAdd = reactive({
            checkId: '', // 检测站id
            checkTypeId: '', // 检测类型id
            projectId: '', // 项目id
            sendType: '', // 送检类型
            // form: string // 表单数据 后端直接 添加的时候从check_type表取
            formData: '', // 委托单填写的数据
            order: '', // 来样编号(委托单位自己填. 这个随便 委托单位做记录用)
            specifications: '', // 品种规格
            other: '', // 备注
            position: '', // 使用部位
            sendPosition: '' // 送检部位
        })

        return {
            form,
            ...add(form)
        }
    }
})
</script>

<style>

</style>
